<template>
    <bi-tab style="height: 300px;" >
        <bi-tab-item label="基本参数">
            <bi-form ref="form">
                <bi-form-item label="NAME">
                    <bi-input name="name" v-model="fromData.name" placeholder="请输入参数名称" required   :rule="/^[A-Za-z]{1}[A-Za-z0-9_]{2,49}$/"  rule-message="3~50个英文字母,下划线和数字，只能以字母开头"  />
                </bi-form-item>
                <bi-form-item label="标题">
                    <bi-input name="title" v-model="fromData.title" placeholder="请输入参数标题" required />
                </bi-form-item>
                <bi-form-item label="类型">
                    <bi-select name="type" v-model="inputType" ref="type"  required >
                        <bi-select-option v-for="item in typeOption" :key="item.value" :value="item.value" :label="item.label"  />
                    </bi-select>
                </bi-form-item>
                <bi-form-item label="默认值">
                    <bi-input name="default" v-model="fromData.defaultValue" placeholder="请输入参数默认值"  />
                </bi-form-item>
                <bi-form-item label="必填">
                    <bi-switch name="required" v-model="required" placeholder="请输入参数默认值"  />
                </bi-form-item>
            </bi-form>
        </bi-tab-item>

        <bi-tab-item label="扩展参数" v-if="extendShow">
            <component :is="'extend-'+inputType" v-model="fromData.props" ref="extend"></component>
        </bi-tab-item>

        <bi-tab-item label="选项" v-if="optionShow" >
            <bi-list dir="row"  :data="fromData.option" @add="addOption" @del="delOption" v-slot="{item,index}"  >
                <div class="row g-2">
                    <div class="col-6">
                        <bi-input name="label" v-model="item.label" placeholder="请输入标题" />
                    </div>
                    <div class="col-6">
                        <bi-input name="value" v-model="item.value" placeholder="请输入值" />
                    </div>
                </div>
            </bi-list>
        </bi-tab-item>

    </bi-tab>    
</template>


<script>

import modelFieldList from './model-field-list.js';
console.log(modelFieldList);
let components = {};

for(let name in modelFieldList){
    if (modelFieldList[name].extends){
        components['extend-'+name] = modelFieldList[name].extends;
    }
}

export default{
    dialog:{

        width:500
    },
    components,
    data(){

        let typeOption = [];


        Object.keys(modelFieldList).forEach(item=>{
            typeOption.push({
                value:item,
                label:modelFieldList[item].label
            });
        });


        let fromData = {
                param_id:'',
                name:'',
                title:'',
                type:'shop-input',
                required:0,
                props:{},
                defaultValue:'',
                option:[{
                    label:'',
                    value:''
                }],
        }

        let edit = false;
        let required = false;
        
        if (this.item) edit = true;

        this.$assign(fromData,this.item);

        if (fromData.required == 1) required = true;
        return {
            edit,
            fromData,
            inputType:fromData.type,
            required,
            typeOption,
            optionShow:false,
            extendShow:false
        }
    },
    props:{
        item:Object,
        model_id:[Number,String]
    },
    watch:{
        inputType:{
            handler(newValue,oldValue){
                //判断
                if (newValue==''){
                    this.optionShow = false;
                    return;
                }
                
                if (modelFieldList[newValue]== undefined){
                    this.optionShow = false;
                    return;
                }


                if (modelFieldList[newValue].option){
                    this.optionShow = true;
                }else{
                    this.optionShow = false;
                }

                if (modelFieldList[newValue].extends){
                    this.extendShow = true;
                }else{
                    this.extendShow = false;
                }
            },
            immediate:true
        },
    },
    methods:{
        addOption(){
            this.fromData.option.push({
                label:'',
                value:''
            });
        },
        delOption(index,item){
            this.fromData.option.splice(index,1);
        },
        dialogOk(){
            if (this.$refs.form.check()){

                if (this.extendShow){
                    if (!this.$refs.extend.check()){
                        return false;
                    }
                }

                if (this.required){
                    this.fromData.required = 1;
                }else{
                    this.fromData.required = 0;
                }

                this.$ajax({
                    url:this.$url({app:'shop','controller':'admin.model','action':'saveParam'}),
                    data:{
                        ...this.fromData,
                        type:this.inputType,
                        type_title:this.$refs.type.getLabel(),
                        model_id:this.model_id
                    },
                    success:(re)=>{
                        this.dialog.callback();
                        this.$toast('保存成功');
                        this.dialog.close();
                    }
                })
            
            }
            return false;
        }
    },
    mounted(){
    },
}
</script>